import React from 'react';
import * as echarts from 'echarts';
import { connect } from 'react-redux';
import './App.css';

const handle = (property) => {
  return function (a, b) {
    const val1 = a[property];
    const val2 = b[property];
    return val1 - val2;
  }
}
class AppHed extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  componentDidMount() {
    this.fetchData(this.props);
  }
  fetchData = (props) => {
    const { growthData, growthBzData, babyData } = props;
    var datas = [];
    var dataBaby = [];
    var dataMin = [];
    var data10 = [];
    var dataBZ = [];
    var data90 = [];
    var dataMax = [];
    var btype = babyData.correctGestionalAge < 40 ? 0 : 1; //早产儿是0
    var legendData = ['宝宝', '3%', '10%', '50%', '90%', '97%']
    if (btype === 1) {
      legendData = ['宝宝', '3%', '15%', '50%', '85%', '97%']
    }
    growthBzData.forEach(element => {
      datas.push(element.gestationalAge)
      dataMin.push(element.headThree);
      dataMax.push(element.headNintySeven);
      dataBZ.push(element.headFifty)
      data10.push(btype == 1 ? element.headFifteen : element.headTen)
      data90.push(btype == 1 ? element.headEightyFive : element.headNinty)
    });
    datas.forEach(element => {
      var obj = growthData.filter(o => o.ageWeek === element)[0]
      if (btype === 1)
        obj = growthData.filter(o => o.ageMonth === element)[0]
      if (obj) {
        dataBaby.push([element.toString(), obj.headCirc])
      }
    })

    var chartDom = document.getElementById('LineHeadDiv');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      // title: {
      //   text: '宝宝身高曲线'
      // },
      tooltip: {
        trigger: 'axis',
        position: 'inside',
        formatter: function (params) {
          let str = params[0].name + (btype === 0 ? " 周" : " 月") + "<br />";
          let byd = params[0]
          let str2 = byd.name + (btype === 0 ? "周" : "月");
          let i = 0

          str += '<table width="100%">'
          params.forEach((item) => {
            str +=
              '<tr><td style="text-align:left"><span class="leg" style="background-color:' + item.color + '"></span>' + item.seriesName + ' : </td><td style="text-align:right">' + (item.data[1] ? item.data[1] : item.data) + " cm</td></tr>";
            if (byd.data && item.data && byd.data > item.data) {
              i++
            }
          });
          str += '</table>'
          if (i > 0) {
            str += '<div class="' + (i >= 3 ? 'leg2' : 'leg3') + '">您的宝宝在' + str2 + '处于中' + (i >= 3 ? '上' : '下') + '游水平</div>'
          }
          return str;
        },
      },
      color: ["#448AFF", "#FFC107", "#BDBDBD", "#4CAF50", "#BDBDBD", "#FF4081"],
      legend: {
        data: legendData,
        textStyle: {
          fontSize: 8
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      // toolbox: {
      //   show: true,
      //   feature: {
      //     saveAsImage: {}
      //   }
      // },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: datas,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#999'
          }
        },
        minorSplitLine: {
          show: true,
          lineStyle: {
            color: '#ddd'
          }
        }
      },
      yAxis: {
        name: '头围cm',
        type: 'value',
        // axisLabel: {
        //   formatter: '{value} cm'
        // },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#999'
          }
        },
        minorSplitLine: {
          show: true,
          lineStyle: {
            color: '#ddd'
          }
        }
      },
      series: [
        {
          name: legendData[0],
          type: 'line',
          data: dataBaby,
          smooth: true
        },
        {
          name: legendData[1],
          type: 'line',
          data: dataMin,
          smooth: true,
          symbol: 'none',
          areaStyle: {
            origin: 'start',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#FFF' // 0% 处的颜色
              }, {
                offset: 1, color: '#B2DFDB' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          lineStyle:{
            width:1
          },
        },
        {
          name: legendData[2],
          type: 'line',
          data: data10,
          smooth: true,
          symbol: 'none',
          lineStyle:{
            width:1
          },
        },
        {
          name: legendData[3],
          type: 'line',
          data: dataBZ,
          smooth: true,
          symbol: 'none',
          lineStyle:{
            width:1
          },
        },
        {
          name: legendData[4],
          type: 'line',
          data: data90,
          smooth: true,
          symbol: 'none',
          lineStyle:{
            width:1
          },
        },
        {
          name: legendData[5],
          type: 'line',
          data: dataMax,
          smooth: true,
          symbol: 'none',
          areaStyle: {
            origin: 'end',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#FFF' // 0% 处的颜色
              }, {
                offset: 1, color: '#B2DFDB' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          lineStyle:{
            width:1
          },
        },
      ]
    };

    option && myChart.setOption(option);
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps) {
      this.fetchData(nextProps);
    }
  }
  render() {
    return (
      <div id="LineHeadDiv" style={{ width: '100%', height: 400 }}></div>
    )
  };
}
export default connect(
  state => ({ currentUser: state.setCurrentUser, currentChild: state.setCurrentChild })
)(AppHed)